export default {
  name: 'ChatLayout',
  template: `
    <div class="chat-container">
      <el-row :gutter="20">
        <!-- 左侧会话列表 -->
        <el-col :span="6">
          <el-card class="chat-list-card">
            <template #header>
              <div class="chat-header">
                <span>聊天列表</span>
              </div>
            </template>
            <div class="session-list">
              <router-link 
                v-for="session in sessions" 
                :key="session.id"
                :to="getSessionRoute(session)"
                custom
                v-slot="{ navigate, isActive }"
              >
                <div 
                  class="session-item" 
                  :class="{ active: isActive }"
                  @click="navigate"
                >
                  <el-avatar :size="40" :src="session.avatar">
                    {{ session.name?.charAt(0) }}
                  </el-avatar>
                  <div class="session-info">
                    <div class="session-name">{{ session.name }}</div>
                    <div class="last-message">{{ session.lastMessage }}</div>
                  </div>
                  <div class="session-time">{{ formatTime(session.lastTime) }}</div>
                </div>
              </router-link>
            </div>
          </el-card>
        </el-col>
        
        <!-- 右侧聊天内容 -->
        <el-col :span="18">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  `,
  data() {
    return {
      sessions: []
    };
  },
  methods: {
    getSessionRoute(session) {
      return session.type === 'friend' 
        ? `/chat/friend/${session.id}`
        : `/chat/avatar/${session.id}`;
    },
    formatTime(time) {
      // 实现时间格式化
      return new Date(time).toLocaleString('zh-CN');
    },
    async loadSessions() {
      try {
        const data = await request('/api/chat/sessions');
        this.sessions = data;
      } catch (error) {
        this.$message.error('获取会话列表失败');
      }
    }
  },
  mounted() {
    this.loadSessions();
  }
}; 